<template>
  <view class="page">
    <u-sticky bgColor="#F5F5F5">
      <view class="card-top">
        <view class="card-count">
          <u-count-to
            :end-val="userInfo.virtual_coin"
            separator=","
            decimals="2"
            bold
            font-size="60rpx"
            color="#7d7f8c"
          />
        </view>
        <view class="m-row">
          <view style="margin: 10rpx 10rpx 0 0">
            <u-image
              show-loading
              :show-menu-by-longpress="false"
              :src="require('@/static/my/coin.png')"
              width="36rpx"
              height="36rpx"
            />
          </view>
          <view> 我的虚拟币 </view>
        </view>
        <view class="card-btn" @click="rechargeShow = true">立即充值</view>
      </view>
      <Tabs :list="tabList" @click="handleTab" :current="current" :scrollable="false" />
    </u-sticky>
    <view v-for="(i, k) in dataList" :key="k" class="card-box">
      <u-row>
        <u-col span="8">
          <u-text
            v-if="current == 0"
            :text="`充值单号：${i.orderid || '-'}`"
            color="#222222"
            size="14"
            line-height="22"
          />
          <u-text
            v-else
            :text="`使用时间：${$TimeFormat(i.createtime * 1000, 'yyyy-mm-dd hh:MM')}`"
            color="#222222"
            size="14"
            line-height="22"
          />
        </u-col>
        <u-col span="4">
          <u-text
            mode="price"
            :text="i.payamount || '-'"
            color="#3BA199"
            align="right"
            line-height="22"
            size="16"
          />
        </u-col>
      </u-row>
      <u-gap height="10" />
      <u-row>
        <u-col span="8">
          <u-text
            v-if="current == 0"
            :text="`充值时间：${$TimeFormat(i.createtime * 1000, 'yyyy-mm-dd hh:MM')}`"
            color="#BABABA"
            size="14"
            line-height="22"
          />
          <!-- <u-text
            v-else
            :text="`订单号：${i.orderid || '-'}`"
            color="#BABABA"
            size="14"
            line-height="22"
          /> -->
        </u-col>
        <u-col span="4">
          <u-text
            :text="`币数：${i.virtual_coin || '0'}`"
            color="#BABABA"
            align="right"
            size="14"
            line-height="22"
          />
        </u-col>
      </u-row>
    </view>
    <u-loadmore :status="status" />
    <u-popup :show="rechargeShow" closeable round="20" @close="closeRecharge">
      <view class="bottom-box">
        <view class="bottom-box-title">充值虚拟币</view>
        <view class="bottom-box-row">
          <text>充值金额：</text>
          <view>
            <u-number-box
              v-model="rechargeNumber"
              button-size="60rpx"
              input-width="50"
              bg-color="#CEE7E5"
              icon-style="color: #3BA199"
              @change="changeRecharge"
            />
          </view>
          <text>元</text>
        </view>
        <view class="bottom-box-row">
          <text>结算虚拟币：</text>
          <view>
            {{ parseFloat(rechargeNumber) * parseFloat(userInfo.recharge_ratio) }}
          </view>
          <text>币</text>
        </view>
        <view class="bottom-box-btn" @click="confirmRecharge">立即支付</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import Tabs from "@/components/Tabs/index";

import { myRefreshInfo, myCoinRecharge, myCoinUse, myCoinPay } from "@/request/myApi.js";
export default {
  components: { Tabs },
  data() {
    return {
      current: 0,
      tabList: [{ name: "充值记录" }, { name: "使用记录" }, { name: "退款记录" }],
      userInfo: {}, // 用户信息
      dataList: [], // 数据列表
      rechargeShow: false, // 充值弹窗
      rechargeNumber: 1, // 充值币数量
      status: "loadmore", // 加载状态
      total: 0, // 总数
      page: 1, // 页数
    };
  },
  onReachBottom() {
    if (this.total <= this.dataList.length) return;
    this.page++;
    this.handleSearch();
  },
  onLoad() {
    this.handleRefresh();
    this.handleSearch();
  },
  methods: {
    // 切换选项卡
    handleTab(v) {
      this.current = v.index;
      this.handleSearch();
    },
    // 处理更新数据
    handleSearch() {
      this.page = 1;
      this.dataList = [];
      this.total = 0;
      uni.pageScrollTo(); // 滚动到顶部
      if (this.current == 0) {
        this.getDataList();
      } else {
        this.getUseList();
      }
    },
    // 更新用户信息
    handleRefresh() {
      myRefreshInfo().then((res) => {
        if (res.code == 1) {
          let info = this.$getStorage('USER_INFO');
          info.virtual_coin = res.data.userinfo.virtual_coin;
          Object.keys(res.data.userinfo).forEach(i => {
            info[i] = res.data.userinfo[i];
          })
          this.userInfo = info;
          uni.setStorageSync("USER_INFO", JSON.stringify(info));
        }
      });
    },
    // 获取数据列表
    getDataList() {
      this.status = "loading";
      myCoinRecharge({
        page: this.page,
        pageSize: 10,
      })
        .then((res) => {
          if (res.code == 1) {
            let list = res.data.list;
            this.dataList = this.page == 1 ? list : this.dataList.concat(list);
            this.total = res.data.total;
          }
        })
        .finally(() => {
          this.status = this.total > this.dataList.length ? "loadmore" : "nomore";
        });
    },
    // 获取使用记录
    getUseList() {
      myCoinUse({
        page: this.page,
        pageSize: 10,
        type: this.current == 1 ? "use" : "refund",
      })
        .then((res) => {
          if (res.code == 1) {
            let list = res.data.list;
            this.dataList = this.page == 1 ? list : this.dataList.concat(list);
            this.total = res.data.total;
          }
        })
        .finally(() => {
          this.status = this.total > this.dataList.length ? "loadmore" : "nomore";
        });
    },
    // 修改充值金额
    changeRecharge(v) {
      console.log(v, "结算金额");
    },
    // 充值获取code
    confirmRecharge() {
      uni.login({
        success: (e) => {
          this.handleRecharge(e.code);
        },
        fail: (e) => {
          uni.showModal({
            content: "无法获取微信code,原因为: " + e.errMsg,
            showCancel: false,
          });
        },
      });
    },
    // 充值
    handleRecharge(code) {
      let data = {
        code,
        type: "wechat", // 充值类型
        method: "miniapp", // 充值方式
        money: this.rechargeNumber,
      };
      myCoinPay(data).then((res) => {
        if (res.code == 1) {
          uni.requestPayment({
            appId: res.data.appId,
            nonceStr: res.data.nonceStr,
            package: res.data.package,
            paySign: res.data.paySign,
            signType: res.data.signType,
            timeStamp: res.data.timeStamp,
            success: (e) => {
              this.closeRecharge();
              uni.showToast({
                title: "充值已提交，请稍后查询",
                icon: "none",
                success: () => {
                  setTimeout(() => {
                    this.handleRefresh();
                  }, 1500);
                },
              });
            },
            complete: () => {
              this.loading = false;
              this.disabled = false;
            },
          });
        }
      });
    },
    // 关闭充值弹窗
    closeRecharge() {
      this.rechargeNumber = 1;
      this.rechargeShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx;
  min-height: calc(100vh - 40rpx);
  background-color: #f5f5f5;
  .card-top {
    width: 100%;
    height: 202rpx;
    background-color: #d5d5e3;
    background-image: url(../../static/my/card1.png);
    background-size: cover;
    border-radius: 20rpx;
    position: relative;
    .card-count {
      position: absolute;
      top: 40rpx;
      left: 60rpx;
    }
    .m-row {
      position: absolute;
      left: 60rpx;
      bottom: 40rpx;
      display: flex;
      color: #a09ea9;
      font-size: 36rpx;
      line-height: 50rpx;
      text-align: center;
    }
    .card-btn {
      position: absolute;
      right: 20rpx;
      bottom: 30rpx;
      font-size: 28rpx;
      color: #7d7f8c;
    }
  }
  .card-box {
    padding: 22rpx;
    border-radius: 20rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
  }
  .bottom-box {
    padding: 20rpx;
    &-title {
      padding-bottom: 20rpx;
      text-align: center;
      font-size: 32rpx;
      font-weight: 600;
    }
    &-row {
      margin-top: 40rpx;
      display: flex;
      align-items: center;
      padding-left: 40rpx;
      > view {
        margin: 0 20rpx;
      }
    }
    &-btn {
      margin: 60rpx auto 0 auto;
      width: 274rpx;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      color: $active-color;
      font-size: 28rpx;
      background-color: #cee7e5;
      border-radius: 40rpx;
      &:active {
        background-color: #c3e0de;
      }
    }
  }
}
</style>
